<template>
  <div>
      <div class="header">
        <i class="iconfont icon-qianjin-copy" @click="iconClick"></i>
        信用卡取现
        <div class="right" @click="toEnchashList">取现记录</div>
      </div>
      <div class="card">
        <div class="cxk">
          <div class="left-item">到账储蓄卡</div>
          <div class="right-item hasNoCard" v-if="!methodList.reachCardNo" @click="addCxk">+添加储蓄卡</div>
          <div class="right-item hasCard" v-else @click="tishi">
            <img class="bankImg" :src="methodList.reachCardBankImgUrl"  alt="">
            <div class="bank">{{methodList.reachName}}（{{methodList.reachCardNo}}）</div>
          </div>
          <img class="tishi" src="../../../../assets/enchash/tishi.png" alt="" @click="tishi">
        </div>
        <div class="xyk">
          <div class="left-item">取现信用卡</div>
          <div class="right-item hasNoCard" v-if="!methodList.borrowCardNo" @click="addXyk">+添加信用卡</div>
          <div class="right-item hasCard" v-else @click="changeCard(1)">
            <img class="bankImg" :src="methodList.borrowCodeBankImgUrl"  alt="">
            <div class="bank">{{methodList.borrowName}}（{{methodList.borrowCardNo}}）</div>
          </div>
          <i class="iconfont icon-jiankuohaoxiyou" v-show="methodList.borrowCardNo" @click="changeCard(1)"></i>
        </div>
      </div>

      <div class="moneyContent">
        <div class="content1">取现金额</div>
        <div class="content2">
          <span>&yen;</span>
          <input type="text" placeholder="请输入整百金额" @keyup="moneyCheck" v-model="money">
        </div>
        <div class="content3">
          <div class="left">费率{{methodList.enchashment_rate}}%，立即到账</div>
          <div class="right">
            <span>•整百提取</span>
            <span>•最小提现{{methodList.minMoney}}元</span>
          </div>
          
        </div>
      </div>
      <div class="nextStep" @click="nextStep">下一步</div>
      <div class="infor">
        <img src="../../../../assets/enchash/xiaolian.png">
        <div class="box">
          <ol>
            <li>姓名、手机号，需和开户行留存信息保持一致</li>
            <li>可取出您信用卡当前剩余的全部金额，超出不可取</li>
            <li>信用卡出账单后正常还款即可</li>
            <li>在无任何特殊原因，10分钟内可到账</li>
            <li>更多信用卡取现的问题，点击[我的]-[帮助中心]-[信用卡取现问题]</li>
            <li>如有疑问请联系微信公众号：微信号：szqb666/szqb51</li>
          </ol>
        </div>
      </div>
  </div>
</template>
<script>
import Top from '@/components/Header';
import { MessageBox } from 'mint-ui';
import { cookie } from 'vux'

export default {
  name: 'method',
  components: { Top },
  data() {
    return {
      methodList: {},//信用卡和储蓄卡对象
      headTitle: '',
      money:'',
      code:''
    }
  },
  watch: {
    money: {
      //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
      handler(curVal, oldVal) {
        // window.sessionStorage.setItem('tel',curVal.tel);
      },
      deep: true
    }
  },
  mounted() {
    if(window.localStorage.getItem('active')=='2'){
      window.localStorage.setItem('active','1')
    }
    window.localStorage.setItem('shouTogetchashObj','');
    if(this.$route.query.channel){
      window.sessionStorage.setItem('channel',this.$route.query.channel);
    }
    // 查询取现详情
    this.$http.get('/loansupermarket-pay/order/haveCard?token='+cookie.get('token')).then(function(response){
      var resBody = response.body;
      if(resBody.code=='000'){
        this.methodList = resBody.data;
      }else if(resBody.code == '444'){
        this.code='444';
        if(!this.$route.query.checkLogin){
          this.$router.push({path:'/login',query:{history:1}});
        }
      }else{
        MessageBox.alert(resBody.mesg);
      }
    })

    
    
    
  },
  methods: {
    //返回箭头
    iconClick(){
      this.$router.go(-1);
    },
    //取现记录
    toEnchashList(){
      this.$router.push({ path: '/main/mine/enchash/enchashList'});
    },
    //添加信用卡
    addXyk(){
      if(!this.methodList.saveId){
        MessageBox.alert('请添加到账储蓄卡', '提示');
        return;
      }
      if(this.code=='444'){
        this.$router.push({path:'/login',query:{history:1}});
      }else{
        this.$router.push({ path: '/main/mine/myCard/addcard', query: { active: '1' } });
      }
    },
    //添加储蓄卡
    addCxk(){
      if(this.code=='444'){
        this.$router.push({path:'/login',query:{history:1}});
      }else{
        this.$router.push({ path: '/main/mine/myCard/addcard', query: { active: '2' } });
      }
    },
    //换卡
    changeCard(id){
      this.$router.push({ path: '/main/mine/myCard/changecard', query: { active: id }});
    },
    //储蓄卡提示
    tishi(){
      MessageBox.alert('只能绑定一张新的到账卡。若需更换，<br/>请先删除，再绑定新卡。<br/>位置：我的-卡包-储蓄卡', '提示');
    },
    //下一步
    nextStep(){

      if(!this.methodList.saveId){//没有储蓄卡
        MessageBox.alert('请添加到账储蓄卡', '提示');
        return;
      }
      
      if(!this.methodList.creditId){//没有信用卡
        MessageBox.alert('请添加提现信用卡', '提示');
        return;
      }
      
      if(!/^[1-9]\d*00$/.test(this.money)){
        MessageBox.alert('请输入整百数字', '提示');
        return;
      }
      
      if(this.money<this.methodList.minMoney || this.money>this.methodList.maxMoney){
        MessageBox.alert('取现额度为'+this.methodList.minMoney+'-'+this.methodList.maxMoney, '提示');
        return;
      }

      
      let queryObj = {
        money:this.money,//取现金额
        reachMoney:this.money*(100-this.methodList.enchashment_rate)/100,//到账金额
        shouxufei:this.money*this.methodList.enchashment_rate/100,//手续费
        borrowCodeBankImgUrl:this.methodList.borrowCodeBankImgUrl,//信用卡图片
        reachCardBankImgUrl:this.methodList.reachCardBankImgUrl,//储蓄卡图片
        borrowName:this.methodList.borrowName,//信用卡名字
        reachName:this.methodList.reachName,//储蓄卡名字
        borrowCardNo:this.methodList.borrowCardNo,//信用卡尾号
        reachCardNo:this.methodList.reachCardNo,//储蓄卡尾号
        creditId:this.methodList.creditId,//信用卡id
        saveId:this.methodList.saveId,//储蓄卡id
        enchashment_rate:this.methodList.enchashment_rate,//汇率

      }
      window.sessionStorage.setItem('canClick','true');
      window.sessionStorage.setItem('shouTogetchashObj',JSON.stringify(queryObj));
      this.$router.push({ path: '/main/mine/enchash/shouTogetchash'});
      
    },
    //输入金额校验
    moneyCheck(){
      var moneyVal = this.money;
      if (!/^\d+$/.test(moneyVal)) {
        this.money = moneyVal.replace(/\.\d*|[^\d]+/, "");
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
    background: -webkit-linear-gradient(bottom, #2ce9e8, #7dd7ff);
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 1.2rem;
    // background: $primaryColor;
    color: #fff;
    text-align: center;
    font-size: 0.42rem;
    line-height: 1.2rem;
    .icon-qianjin-copy {
        position: absolute;
        left: 0.4rem;
        color: #fff;
    }
    .right{
      position: absolute;
      right: 0.4rem;
      top:0;
      font-size: 0.4rem;
    }
    
}
.card{
  .xyk,.cxk{
    width: 9.2rem;
    height: 1.33rem;
    line-height: 1.33rem;
    margin:0 auto;
    margin-bottom: 0.4rem;
    background: #fff;
    border-radius: 0.15rem;
    .left-item{
      float: left;
      font-size:0.37rem;
      margin-left: 0.4rem;
      margin-right: 0.8rem;
      color:#666;
    }
    .right-item{
      float: left;
    }
    .hasCard{
      color: #333;
      font-size: 0.42rem;
      .bankImg{
        float: left;
        width: 0.72rem;
        height: 0.72rem;
        margin-top:0.32rem; 
        margin-right: 0.21rem;
      }
      .bank{
        float: left;
      }
      
    }
    i.icon-jiankuohaoxiyou{
        float: right;
        margin-right: 0.4rem;
      }
    .hasNoCard{
      margin-left: 0.74rem;
      font-size: 0.42rem;
      color:#00dada;
    }
  }
  .cxk{
    margin-top: 1.6rem;
    .tishi{
      float: right;
      width:0.4rem;
      height:0.4rem;
      margin-right: 0.4rem;
      margin-top: 0.46rem;
    }
  }
}
.moneyContent{
  padding-left: 0.66rem;
  padding-right: 0.66rem;
  background:#fff;
  .content1{
    padding-top: 0.4rem;
    margin-bottom: 0.26rem;
    color:#656565;
    font-size: 0.32rem;
    text-align: left;
  }
  .content2{
    font-size: 0.64rem;
    text-align: left;
    color:#ff7a7b;
    // margin-bottom: 0.4rem;
    height: 1rem;
    span{
      float: left;
    }
    input{
      float: left;
      width: 40%;
      color:#ff7a7b;
      font-size: 0.64rem;
      border:none;
      outline:0;
      padding-left: 0.4rem;
    }
    input::-webkit-input-placeholder{
      color:#c8c8c8;
    }
  }
  .content3{
    height: 1rem;
    .left{
      float: left;
      color:#666;
      font-size:0.32rem;
    }
    .right{
      float:right;
      margin-top: -0.6rem;
      font-size: 0.32rem;
      color: #666;
      span{
        display: block;
        text-align: left;
        margin-top: 0.1rem;
      }
    }
  }
}
.nextStep{
  margin:0 auto;
  margin-top: 0.8rem;
  width: 9rem;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.4rem;
  color:#fff;
  background: #00dada;
  border-radius: 0.15rem;
}
.infor{
  margin-top: 0.8rem;
  padding:0.53rem 0.66rem 0.53rem 0.46rem;
  position: relative;
  background:#ededed;
  img{
    position: absolute;
    left: 0.46rem;
    top: 0.6rem;
    width: 0.266rem;
  }
  .box{
    padding-left: 0.8rem;
    text-align: left;
    ol{
      li{
        color:#adadad;
        font-size: 0.29rem;
        margin-top: 0.2rem;
      }
      li:first-child{
        margin-top: 0;
      }
    }
  }
}
</style>

